<template>
  <div class='friend'>
    <mt-header fixed title="好友">
      <router-link to="/user" replace slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="list" v-if="list.length>0">
      <div v-for="(item, index) in list" :key="index" class='friend-item'>
        <div class="name">
          网名
          <span>Lv1</span>
        </div>
        <div class="num">
          <div class="phone">
            <img src="../assets/img/手机.png" alt="">
            1212121212
          </div>
          <div class="phone wx">
            <img src="../assets/img/微信.png" alt="">
            1212121212
          </div>
        </div>
      </div>
    </div>
    <div v-else class="null">
      <img src="../assets//img/暂无数据.png" alt="">
    <p>暂无好友</p>
    </div>
  </div>
</template>

<script>
import { Indicator, Toast } from 'mint-ui'
export default {
  data () {
    return {
      list: []
    }
  },
  mounted () {
    Indicator.open()
    this.getInfo()
  },
  methods: {
    async getInfo (ids) {
      let that = this
      let res = await that.$api({
        method: 'post',
        url: '/app/examine/friend'
      })
      try {
        if (res.success) {
          console.log(res)
          Indicator.close()
          this.list = res.data
          console.log(this.list.length)
        } else {
          Toast(res.msg)
        }
      } catch (error) {
        console.log(error)
        Indicator.close()
      }
    }
  }
}
</script>

<style scoped lang='less'>
.friend{
  padding:.6rem .12rem .2rem;
  .list{
    .friend-item{
      padding: .12rem .16rem;
      background-color: #fff;
      margin-top: .1rem;
      .name{
        font-size: .18rem;
        span{
          color: #77A9FD;
          font-size: .12rem;
          display: inline-block;
          margin-left: .04rem;
        }
      }
      .num{
        display: flex;
        margin-top: .14rem;
      }
      .phone{
        display: flex;
        align-items: center;
        font-size: .14rem;
        color: #666;
        img{
          width: 0.2rem;
          height: 0.2rem;
        }
      }
      .wx{
        margin-left: .2rem;
      }
    }
  }
}
.null{
  text-align: center;
  font-size: .16rem;
  color: #666;
  margin-top: .8rem;
  p{
    margin-top: .1rem;
  }
}
</style>
